import styles from './index.less';
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
import { Modal } from 'antd';
import WorkDetail from '../WorkDetail';
interface Props {}
export type WorkDetailModalRef = {
  show: (options: { ids: any[]; currentId: any }) => void;
};

const WorkDetailModal = React.forwardRef<WorkDetailModalRef, Props>((props, ref) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [options, setOptions] = useState({});
  const bodyStyleOverFlowCurrent = useRef('');

  const esc = (event) => {
    if (event.keyCode === 27) {
      event.preventDefault();
      handleClose(event);
    }
  };

  useImperativeHandle(ref, () => ({
    show: (_options) => {
      document.addEventListener('keydown', esc);
      bodyStyleOverFlowCurrent.current = document.body.style.overflow;
      console.log(bodyStyleOverFlowCurrent.current, ' bodyStyleOverFlowCurrent.current');
      window.history.pushState(null, '', `/center/work/detail/${_options.currentId}`);
      setOptions(_options);
      setIsModalOpen(true);
      document.body.style.overflow = 'hidden';
    },
  }));

  const handleClose = (e) => {
    document.removeEventListener('keydown', esc);
    e.stopPropagation();
    e.preventDefault();
    setIsModalOpen(false);
    document.body.style.overflow = bodyStyleOverFlowCurrent.current;
    window.history.back();
  };

  return (
    <Modal
      keyboard={false}
      title={null}
      footer={null}
      wrapClassName={styles.modal}
      open={isModalOpen}
      destroyOnClose
      className={styles.detailModal}
      // onOk={handleOk}
      // onCancel={handleCancel}
    >
      <WorkDetail {...options} showClose onClose={handleClose} />
    </Modal>
  );
});

export default WorkDetailModal;
